<template>
    <div>
        <vxe-grid
            border
            resizable
            export-config
            import-config
            keep-source
            tableId="data-table"
            ref="xGrid"
            id="toolbar_demo_1"
            height="680"
            :loading="tableLoading"
            :toolbar="tableToolbar"
            :data="tableData"
            :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
            :pager-config="pagerConfig"
            @page-change="pageChangeChange"
            @toolbar-button-click="toolbarButtonClickEvent">
            <vxe-table-column field="Username" title="栏目" sortable>
                <template v-slot="{ row }">
                    <span>{{ row.Name }}</span>
                </template>
            </vxe-table-column>
            <vxe-table-column field="Realname" title="名称" sortable>
                <template v-slot="{ row }">
                    <span>{{ row.Name }}</span>
                </template>
            </vxe-table-column>
            <vxe-table-column field="Status" title="英文" sortable>
                <template v-slot="{ row }">
                    <span>{{ row.Ename }}</span>
                </template>
            </vxe-table-column>
        </vxe-grid>
<!--        <permissionEdit :visible.sync="editVisible" :formData="formData" ref="vxeForm" :title="title" @search="search"></permissionEdit>-->
    </div>
</template>

<script>
    import permissionEdit from "./permissionEdit";
    // import { permissionApi } from '@/api/organizationApiNow.js'
    import permissionApi from '@/api/organizationApi/permissionApi.js'
    import { mapGetters } from 'vuex';
    export default {
        components: {
            permissionEdit
        },
        data () {
            return {
                formRules: {
                    Name: [
                        { required: true, message: '请输入名称' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
                    ]
                },
                title: '',
                formData: {},
                editModel: '',
                editVisible: false,
                tableLoading: false, // 表格转圈
                tableData: [],
                formValue: {
                    p: 1,
                    pageoffset: 15
                },
                tableToolbar: {
                    refresh: {query: this.search},
                    import: false,
                    export: false,
                    print: false,
                    zoom: true,
                    custom: true
                },
                pagerConfig: {
                    currentPage: 1,
                    pageSize: 15,
                    total: 0,
                    pagerCount: 7,
                    pageSizes: [10,15,20,50,100]
                }
            }
        },
        computed: {
            ...mapGetters(['dictionary']),
            statusList () {
                return (DictTypeCode) => {
                    return this.dictionary.filter(item => item.DictTypeCode === DictTypeCode)
                }
            },
            statusFilterOptions () {
                return (cellValue, DictTypeCode) => {
                    let filter = this.statusList(DictTypeCode).filter(it => it.DictId === cellValue.toString())
                    if (filter.length > 0) {
                        return filter[0].DictName
                    }
                    return ''
                }
            }
        },
        mounted() {
        },
        methods: {
            // 新增
            create () {
                this.formData = {
                    Id: '',
                    Parentid: '',
                    Name: '',
                    Ename: '',
                    Type: null,
                    Weight: null,
                    Icon: ''
                }
                this.title = '权限新增'
                this.editVisible = true
            },
            // 编辑
            editTable (row) {
                this.title = '权限编辑'
                this.formData = JSON.parse(JSON.stringify(row))
                this.editVisible = true
            },
            // 重置
            reset () {
                this.formValue = {
                    p: 1,
                    pageoffset: 15
                }
            },
            // 查询
            search () {
                this.tableLoading = true
                permissionApi.getPage(this.formValue).then(res => {
                    this.tableData = res.Permissions
                    this.tableData.forEach(it => {
                        it = Object.assign(it, it.Profile)
                    })
                    this.pagerConfigFun(res)
                }).finally((_) => {
                    this.tableLoading = false
                })
            },
            pagerConfigFun (res) {
                // this.pagerConfig.currentPage = res.Page
                this.pagerConfig.total = res.Total
            },
            pageChangeChange (pageConfig) {
                this.formValue.p = pageConfig.currentPage
                this.pagerConfig.currentPage = pageConfig.currentPage
                this.formValue.pageoffset = pageConfig.pageSize
                this.pagerConfig.pageSize = pageConfig.pageSize
            },
            toolbarButtonClickEvent () {
            }
        },
        watch: {
            'formValue.p': {
                handler (n, o) {
                    this.search()
                }
            },
            'formValue.pageoffset': {
                handler (n, o) {
                    this.search()
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .search >>> .vxe-form--item{
        padding: 0 .8em .5em 0 !important;
    }
</style>
